@import "~scss/variables";
@import "~scss/mixins";

.sw-help-center {
    &__button {
        @include reset-button;

        width: 40px;
        height: 40px;
        border-radius: var(--border-radius-button);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        color: var(--color-icon-primary-default);

        &:hover {
            background: var(--color-interaction-secondary-hover);
        }

        &:focus-visible {
            outline: var(--scale-size-2) solid var(--color-border-brand-selected);
            outline-offset: var(--scale-size-2);
        }
    }

    &__badge {
        @include flex-centering;
        @include circle(18px);

        position: absolute;
        z-index: 1;
        top: -40%;
        right: -50%;
        overflow: hidden;

        * {
            width: 100%;
            height: 100%;
        }
    }

    &__badge .sw-card {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    &__badge .sw-card__content {
        padding: 0;
        background: transparent;
    }
}
